<!DOCTYPE html>
<html>
<head>
<title>AES/CBC/PKCS7Padding</title>
<meta charset="UTF-8" />
<script src="../../s/cryptojs/3.1.2/rollups/aes.js"></script>
</head>
<body>
	<table>
		<tr>
			<td><textarea id="input" style="width: 300px; height: 300px;"></textarea></td>
			<td>
				<div>
					<input id="encrypt" type="button" value="encrypt" />
				</div>
				<div>
					<input id="decrypt" type="button" value="decrypt" />
				</div>
			</td>
			<td><textarea id="output" style="width: 300px; height: 300px;"></textarea></td>
		<tr>
	</table>

	<script>
		var GV = {
			key : '0123456789ABCDEF',
			iv : '0123456789ABCDEF'
		}, EL = {
			input : document.querySelector('#input'),
			encrypt : document.querySelector('#encrypt'),
			decrypt : document.querySelector('#decrypt'),
			output : document.querySelector('#output')
		}, FN = {
			encrypt : function(plaintext, key, iv) {
				var plaintextdata = CryptoJS.enc.Utf8.parse(plaintext);
				var secretkey = CryptoJS.enc.Utf8.parse(key);
				var ivdata = CryptoJS.enc.Utf8.parse(iv);
				var encrypted = CryptoJS.AES.encrypt(plaintextdata, secretkey, {
					iv : ivdata,
					mode : CryptoJS.mode.CBC,
					padding : CryptoJS.pad.Pkcs7
				});
				return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
			},
			decrypt : function(ciphertext, key, iv) {
				var ciphertextdata = ciphertext;
				var secretkey = CryptoJS.enc.Utf8.parse(key);
				var ivdata = CryptoJS.enc.Utf8.parse(iv);
				var decrypted = CryptoJS.AES.decrypt(ciphertextdata, secretkey, {
					iv : ivdata,
					mode : CryptoJS.mode.CBC,
					padding : CryptoJS.pad.Pkcs7
				});
				return decrypted.toString(CryptoJS.enc.Utf8);
			}
		};
		EL.encrypt.addEventListener('click', function() {
			EL.output.value = FN.encrypt(EL.input.value, GV.key, GV.iv);
		});
		EL.decrypt.addEventListener('click', function() {
			EL.output.value = FN.decrypt(EL.input.value, GV.key, GV.iv);
		});
	</script>
</body>
</html>